<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-07 20:32:54
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-28 15:36:37
 * @FilePath: /bangand-low-code/src/layouts/components/LayoutSider.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :style="getHiddenDomStyle">
    <a-layout-sider
      :class="getSiderClass"
      breakpoint="lg"
      collapsible
      :collapsed="sideCollapsed"
      :collapsedWidth="getCollapsedWidth"
      :width="menuWidth"
      :trigger="null"
      @breakpoint="onBreakpointChange"
    >
      <AppLogo v-if="isSidemenu || isMobile" :showTitle="!sideCollapsed && isShowAppTitle" :theme="navTheme" />
      <LayoutMenu />
      <HeaderTrigger class="flex-row-center-center" v-if="isMenuBottomTrigger" />
    </a-layout-sider>
  </div>
</template>

<script>
import Vue from 'vue';
import { objectUtils } from '@/utils';
import { TOGGLE_MOBILE_TYPE } from '@/store/mutation-types';
import { appLatyouMixin } from '@/mixins/app-layout-mixin';
import AppLogo from './AppLogo.vue';
import LayoutMenu from './LayoutMenu.vue';
import HeaderTrigger from './HeaderTrigger.vue';

export default {
  // 组件的名字或者页面的名字
  name: 'LayoutSider',
  mixins: [appLatyouMixin],
  // 加载组件
  components: {
    AppLogo,
    LayoutMenu,
    HeaderTrigger
  },
  // 父级组件传过来的值
  props: {},
  // 页面数据
  data() {
    return {
      prefixCls: 'p-layout-sideBar',
      // 断言
      broken: false
    };
  },
  computed: {
    // 获取折叠后的宽度
    getCollapsedWidth() {
      return this.broken ? 0 : this.menuMinWidth;
    },
    // 获取样式
    getHiddenDomStyle() {
      const width = `${this.menuRealWidth}px`;

      return {
        width: width,
        overflow: 'hidden',
        flex: `0 0 ${width}`,
        maxWidth: width,
        minWidth: width,
        transition: 'all 0.2s'
      };
    },

    getSiderClass() {
      return [
        this.prefixCls,
        this.navTheme,
        {
          [`${this.prefixCls}--fixed`]: this.fixedSidebar,
          [`${this.prefixCls}--mix`]: !this.isSidemenu && !this.isMobile && this.fixedHeader
        }
      ];
    }
  },
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {
    /**
     * @description: 断言改变
     * @param {*} broken
     * @return {*}
     */
    onBreakpointChange(broken) {
      this.broken = broken;

      this.$store.commit(`app/${TOGGLE_MOBILE_TYPE}`, broken);
    }
  }
};
</script>

<style lang="less" >
.p-layout-sideBar {
  z-index: @layout-header-fixed-z-index;
  height: 100%;

  &--fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
  }

  &--mix {
    top: @layout-header-height;
    height: calc(100% - @layout-header-height);
  }

  .app-logo {
    height: @layout-header-height;
    padding: 10px 4px 10px 10px;

    img {
      width: @logo-width;
      height: @logo-width;
    }
    // &.light {
    //   border-bottom: 1px solid @general-border-color;
    // }
  }

  .ant-layout-sider-children {
    display: flex;
    flex-direction: column;

    .p-layout-menu {
      height: 100px;
      flex-grow: 1;

      .ant-menu.ant-menu-root {
        height: 100%;
        overflow: hidden auto;
      }
    }
  }

  .layout-header-trigger {
    // padding-left: 20px;
    height: 40px;
    box-sizing: border-box;

    &.light {
      border-top: 1px solid @general-border-color;
    }
  }
}
</style>
